<!doctype html>
<html lang="en">
<head>
  <title>WebGL Demo</title>
  <meta charset="utf-8">
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

<script>
  const VSHADER_SRC = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;

gl_PointSize = 20.0;

}

`

  const FSHADER_SRC = `

void main() {
gl_FragColor = vec4(.0, .0, 1.0, 1.0);

}

`
  main();


  function main() {
    const canvas = document.querySelector('#glcanvas');

    const gl = canvas.getContext('webgl');

    if (!gl) {
      alert('不支持该浏览器！');
      return;
    }

    // 创建着色器对象

    const fShader = gl.createShader(gl.FRAGMENT_SHADER)

    const vShader = gl.createShader(gl.VERTEX_SHADER)

// 将着色器源码写入对象

    gl.shaderSource(vShader, VSHADER_SRC)

    gl.shaderSource(fShader, FSHADER_SRC)

// 编译着色器

    gl.compileShader(vShader)

    gl.compileShader(fShader)

// 创建程序

    const program = gl.createProgram()

// 程序绑定着色器

    gl.attachShader(program, vShader)

    gl.attachShader(program, fShader)

// 链接程序

    gl.linkProgram(program)

// 使用程序

    gl.useProgram(program)


    gl.vertexAttrib3f(fShader,0.0,0.0,1.0)


    //把画布清理干净
    gl.clearColor(0.0, 0.0, 0.0, 0.1);
    gl.clear(gl.COLOR_BUFFER_BIT)

    gl.drawArrays(gl.POINTS, 0, 1);
  }
</script>
</html>
